<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Home" content="width=device-width, initial-scale=1.0">
    <title>彩云里</title>
    <link rel="stylesheet" href="iceui/src/ui/ui.css" />
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/adminXL.css">
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="wangEditor/style.css">
    <script src="wangEditor/index.js"></script>
    <script src="js/iconfont.js"></script>
    <script src="iceui/src/ice.js"></script>
    <script src="iceui/src/ui/ui.js"></script>
    <script src="iceui/src/popup/icePopup.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            font-size: 20px;
            color: rgb(14, 0, 0);
        }

        .tree-alone {
            height: 50px;
            line-height: 30px;
        }

        li.test {
            margin-left: 15px;
        }

        a:hover>#ForYa {
            background-color: rgb(225, 225, 225)
        }

        a:hover>#zzgz {
            background-color: rgb(226, 226, 226)
        }

        #ForYa {
            color: rgb(15, 20, 25);
            font-weight: bold;
            background-color: white;
            width: 260px;
            height: 55px;
            position: fixed;
            left: 375px;
            z-index: 10000;
        }

        #zzgz {
            color: rgb(15, 20, 25);
            font-weight: bold;
            background-color: white;
            width: 260px;
            height: 55px;
            position: fixed;
            left: 635px;
            z-index: 10000;
        }

        .userinfo:hover {
            background-color: rgb(196, 196, 196);
        }

        .ice-service:hover {
            width: 30px;
            height: 30px;
            border: 1px solid red;
            background-color: rgb(196, 196, 196);
        }

        .ice-service {
            background-color: white;
            position: fixed;
            z-index: 10000;
        }

        .iceservice {
            background-color: white;
            z-index: 10000;
            width: 80px;
            height: 55px;
            position: fixed;
            left: 895px;
        }
    </style>
</head>

<body>
    <div class="layui-row layui-col-space5 layui-container">
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1" style="width:375.7px;height:740px;">
                <div class="left" style="width:375.7px;height:100%;display:inline-block;">
                    <div class="adminXL-sidebar close"
                        style="background-color:white;border-right: 1px solid rgb(196, 196, 196);width:375.7px;">
                        <div class="layui-col-xs2" style="width: 375.7px;height: 100px;">
                            <div class="grid-demo grid-demo-bg1">
                                <a href="page/home.html" class="adminXL-logo-web"
                                    style="position: fixed;top: 30px;left: 130px;">
                                    <img src="img/彩云里Logo.jpg" class="logo" alt="RainbowCloud"
                                        style="width: 60px;height:50px;">
                                </a>
                            </div>
                        </div>
                        <ul id="Menu-tree" class="adminXL-sidebar-menu" style="width:375.7px;">
                            <li class="tree-alone" style="font-weight:bold;">
                                <a onclick="location.reload()">
                                    <i class="icon ice-home"></i>
                                    <span class="title">主页</span>
                                </a>
                            </li>
                            <li class="tree-alone" id="aa">
                                <a href="#" onclick="window.location='Home.html'">
                                    <i class="icon ice-expand"></i>
                                    <span class="title">探索</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="layui-icon layui-icon-notice" style="padding-left:4px;"></i>
                                    <span class="title" style="margin-left:20px;">通知</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#" onclick="window.location='Message.html'">
                                    <i class="icon ice-message"></i>
                                    <span class="title">私信</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-order-out"></i>
                                    <span class="title">列表</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-mass"></i>
                                    <span class="title">社群</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-category"></i>
                                    <span class="title">Premium</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a id="PersonInfo">
                                    <i class="icon ice-user"></i>
                                    <span class="title">个人资料</span>
                                </a>
                            </li>
                            <li class="tree-alone">
                                <a href="#">
                                    <i class="icon ice-computer"></i>
                                    <span class="title">更多</span>
                                </a>
                            </li>
                            <button type="button"
                                class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius layui-bg-blue"
                                style="width: 200px;height: 50px;margin-left:40px;" id="TreepubPost">发布</button>
                            <div class="userinfo"
                                style="width:243.8px;height:65.26px;margin-left:105px;margin-top:35px;border-radius:30px;display:inline-block;">
                                <div class="userimage"
                                    style="width:220px;height:45px;margin-top:9px;margin-left:9px;display:inline-block;">
                                    <img id="useravatar" style="width:45px;height:45px;border-radius:50%;">
                                    <span style="position:absolute;top:665px;left:170px;font-size:15px;color:#0F1419"
                                        id="nickname"></span>
                                    <span style="position:absolute;top:687px;left:170px;font-size:15px;color:#536471;"
                                        id="username"></span>
                                    <i class="icon ice-dropdown" style="margin-left:132px;"></i>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo" style="width:598.4px;margin-left:-66px;">
                <div class="center" style="width:598.4px;height:400px;display:inline-block;">
                    <div class="layui-col-xs10" style="width:598.4px;height:760px;">
                        <div class="grid-demo"
                            style="width:598.4px;height:auto;border-right:1px solid rgb(192, 192, 192);">
                            <div style="width:598.4px;height:56px;border-bottom:1px solid rgb(192, 192, 192);">
                                <a href="javascript:;"><button type="button" id="ForYa"
                                        class="layui-btn layui-btn-primary layui-btn-lg">为你推荐</button></a>
                                <a href="javascript:;"><button type="button" id="zzgz"
                                        class="layui-btn layui-btn-primary layui-btn-lg">正在关注<span id="rencent" class="layui-badge rencent hidden layui-bg-blue"></span></button></a>
                                        
                                <div class="iceservice">
                                    <a href="#"><i class="icon ice-service"
                                            style="position: fixed;left:930px;top:16.5px;font-weight:bold;font-size:16px;"></i></a>
                                </div>
                            </div>
                            <div id="PostEdit" class="grid-demo grid-demo-bg1"
                                style="width:598.4px;min-height: 150px;height: auto;border-bottom:1px solid rgb(192, 192, 192);">
                                <div id="toolbar"></div>
                                <div id="editor" style="min-height: 100px;height: 285px;"></div>
                                <div style="height:42px;margin-top:15px;margin-left:15px;">
                                    <img id="pubuseravatar" style="width: 40px;height:40px; border-radius: 50%;">
                                </div>
                                <button type="button" id="pubPost" disabled
                                    class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius layui-bg-blue disabled"
                                    style="width: 85px;height: 35px;margin-left:440px;line-height:35px;">发布</button>
                            </div>
                            <script>
                                const user = JSON.parse(sessionStorage.getItem("user"));
                                let html = '<p><br></p>';
                                let videourl;
                                let imageurl;
                                let image;
                                let editorcontainer = document.getElementById("editor")
                                let toolbarcontainer = document.getElementById("toolbar")

                                let { createEditor, createToolbar } = window.wangEditor

                                let editorConfig = {
                                    MENU_CONF: {

                                    },
                                    placeholder: '发生了什么？！！',
                                }
                                editorConfig.onChange = (editor) => {            // JS 语法
                                    // editor changed
                                    html = editor.getHtml()
                                    let txt = editor.getText();
                                    // 检查编辑器内容是否为空
                                    let isEmpty = txt.trim() === '';
                                    // 获取提交按钮元素
                                    let submitButton = document.getElementById('pubPost');

                                    // 根据编辑器内容是否为空来禁用或启用提交按钮，并更改样式
                                    if (isEmpty) {
                                        submitButton.disabled = true;
                                        submitButton.classList.add('disabled');
                                    } else {
                                        submitButton.disabled = false;
                                        submitButton.classList.remove('disabled');
                                    }
                                }
                                editorConfig.MENU_CONF['uploadImage'] = {
                                    server: 'http://169.254.202.137:8080/UploadImage',
                                    filedName: 'image',
                                    base64LimitSize: 10 * 1024 * 1024,
                                    maxFileSize: 5 * 1024 * 1024,
                                    "message": '上传失败',
                                    allowedFileTypes: ['image/png/jpg'],
                                    onSuccess(file, res) {          // JS 语法
                                        console.log(`${file.name} 上传成功`, res)
                                    },
                                }

                                editorConfig.MENU_CONF['uploadVideo'] = {
                                    server: 'http://169.254.202.137:8080/UploadVideo',
                                    maxFileSize: 1 * 1024 * 1024 * 1024,
                                    filedName: 'video',
                                    customInsert(res, insertFn) {                  // JS 语法
                                        insertFn('http://169.254.202.137:8080/' + res.data.url)
                                    },
                                    onSuccess(file, res) {          // JS 语法
                                        videourl = res.data.url;
                                    },
                                }
                                // 创建编辑器实例
                                const editor = createEditor({
                                    selector: '#editor',
                                    html: '<p><br></p>',
                                    config: editorConfig,
                                    mode: 'default',
                                })

                                // 创建工具栏实例
                                const toolbar = createToolbar({
                                    editor,
                                    selector: '#toolbar'
                                })
                                toolbar.config.toolbarKeys = [
                                    // 只显示上传图片、上传视频和emoji三个菜单
                                    'uploadImage',
                                    'uploadVideo',
                                    'emotion',
                                ]

                                layui.use(function () {
                                    var layer = layui.layer;
                                    var $ = layui.jquery;

                                    $("#PersonInfo").click(function () {
                                        let url = 'Personal.html?uid=' + user.uid;

                                        window.location.href = url;
                                    })
                                    $("#pubPost").click(function () {
                                        if (user == null || user == undefined) {
                                            layui.layer.msg('请登录!', { icon: 2, time: 1500 }, function () {
                                                // 使用window.location.replace来替换当前页面，不会触发表单事件的提交
                                                window.location.replace("Login.html")
                                            });
                                        } else {
                                            // 使用DOM解析器
                                            var parser = new DOMParser();
                                            var htmlDoc = parser.parseFromString(html, 'text/html');

                                            // 提取所有图片
                                            var images = htmlDoc.getElementsByTagName('img');
                                            for (var i = 0; i < images.length; i++) {
                                                imageurl = images[i].src;
                                            }
                                            removeNodes();
                                            if (imageurl) {
                                                const regex = /^data:image\/(jpeg|png|jpg);base64,/;
                                                image = imageurl.replace(regex, "");
                                            }
                                            while (images[0]) {
                                                images[0].parentNode.removeChild(images[0]);
                                            }
                                            // 提取所有文本
                                            var pcontent = htmlDoc.body.innerHTML;
                                            // 将emoji转换为Unicode编码
                                            function contentToUTF16(str) {
                                                var result = "";
                                                for (var i = 0; i < str.length; i++) {
                                                    result += "\\u" + ("000" + str.charCodeAt(i).toString(16)).substr(-4);
                                                }
                                                return result;
                                            }
                                            // 移除所有不要的节点
                                            function removeNodes() {
                                                //移除所有p标签
                                                let pElements = htmlDoc.getElementsByTagName('p');
                                                for (var i = pElements.length - 1; i >= 0; i--) {
                                                    let pElement = pElements[i];
                                                    let parentElement = pElement.parentNode;
                                                    while (pElement.firstChild) {
                                                        parentElement.insertBefore(pElement.firstChild, pElement);
                                                    }
                                                    parentElement.removeChild(pElement);
                                                }
                                                //移除所有 div 标签
                                                let divElements = htmlDoc.getElementsByTagName('div');
                                                for (var i = divElements.length - 1; i >= 0; i--) {
                                                    let divElement = divElements[i];
                                                    let parentElement = divElement.parentNode;
                                                    while (divElement.firstChild) {
                                                        parentElement.insertBefore(divElement.firstChild, divElement);
                                                    }
                                                    parentElement.removeChild(divElement);
                                                }
                                                //移除所有video标签
                                                let videoElements = htmlDoc.getElementsByTagName('video');
                                                for (var i = videoElements.length - 1; i >= 0; i--) {
                                                    let videoElement = videoElements[i];
                                                    let parentElement = videoElement.parentNode;
                                                    while (videoElement.firstChild) {
                                                        parentElement.insertBefore(videoElement.firstChild, videoElement);
                                                    }
                                                    parentElement.removeChild(videoElement);
                                                }
                                                // 移除所有source标签
                                                let sourceElements = htmlDoc.getElementsByTagName('source');
                                                for (var i = sourceElements.length - 1; i >= 0; i--) {
                                                    let sourceElement = sourceElements[i];
                                                    let parentElement = sourceElement.parentNode;
                                                    while (sourceElement.firstChild) {
                                                        parentElement.insertBefore(sourceElement.firstChild, sourceElement);
                                                    }
                                                    parentElement.removeChild(sourceElement);
                                                }
                                            }
                                            let formdata = new FormData()
                                            formdata.append("pcontent", contentToUTF16(pcontent));
                                            formdata.append("image", image);
                                            formdata.append("videourl", videourl);
                                            formdata.append("publisheruid", user.uid);

                                            $.ajax({
                                                url: 'http://169.254.202.137:8080/PubPost?',
                                                data: formdata,
                                                processData: false,
                                                contentType: false,
                                                type: 'Post',
                                                dataType: 'json',
                                                success: function (res) {
                                                    if (res.code == 200) {
                                                        layui.layer.msg('发布成功', { icon: 1, time: 1500 }, function () {
                                                            editor.setHtml('');
                                                            addRecentPost(res.data);
                                                        });
                                                    }
                                                }
                                            })
                                        }
                                    })
                                    // 将最新发布的帖子添加到容器中
                                    function addRecentPost(post) {
                                        let container = $('#ID-flow-demo')
                                        let html = '';

                                        let date = new Date(post.ptime)
                                        // 获取该时间的毫秒数
                                        var dateMs = date.getTime();

                                        // 获取当前时间的毫秒数
                                        var nowMs = Date.now();

                                        var dateyear = date.getFullYear();

                                        var nowyear = new Date().getFullYear();

                                        // 计算两个时间的差值，单位为毫秒
                                        var diffMs = nowMs - dateMs;

                                        // 将差值除以 1000，得到两个时间的差值，单位为秒
                                        var diffSec = Math.floor(diffMs / 1000);

                                        // 定义一个空字符串，用于存储拼接的结果
                                        var diffStr = "";

                                        // 判断差值的大小，拼接成相应的字符串
                                        if (dateyear != nowyear) {
                                            diffStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
                                        } else if (diffSec < 60) {
                                            // 如果差值小于 60 秒，显示为几秒
                                            diffStr = diffSec + "秒前";
                                        } else if (diffSec < 3600) {
                                            // 如果差值小于 3600 秒，显示为几分钟
                                            diffStr = Math.floor(diffSec / 60) + "分钟前";
                                        } else if (diffSec < 86400) {
                                            // 如果差值小于 86400 秒，显示为几小时
                                            diffStr = Math.floor(diffSec / 3600) + "小时前";
                                        } else if (diffSec < 604800) {
                                            diffStr = Math.floor(diffSec / 86400) + "天前";
                                        } else if (diffSec < 31536000) {
                                            diffStr = date.getMonth() + 1 + "月" + date.getDate() + "日";
                                        } else {
                                            diffStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
                                        }
                                        // 拼接帖子的信息
                                        html += '<div class="list-group" id="post-' + post.pid + '" @click="handleClick">';
                                        html += '<img class="avatar" src="data:image/png;base64,' + post.publishaccountInfo.avatar + '">' + '<p id="uid" hidden>' + post.publishaccountInfo.uid + '</p>' + '<p hidden>' + post.pid + '</p>'
                                        html += '<span class="nickname">' + post.userinfo.nickname + '</span>' + '<span class="username">@' + post.publishaccountInfo.username + '</span>&nbsp;·&nbsp;' + '<time datetime="' + post.ptime + '" id="time-' + post.pid + '" lay-src="' + post.ptime + '">' + diffStr + '</time>';
                                        html += '<p class="content">' + UTF16Tocontent(post.pcontent) + '</p>';
                                        if (post.pimage && post.pvideo) { // 如果帖子有图片，显示图片
                                            html += '<div class="imgvideo"><div class="img"><img class="image" src="data:image/png;base64,' + post.pimage + '">' + '<div class="videos"><video class="video" src="http://169.254.202.137:8080/' + post.pvideo + '"controls></video></div>' + '</div></div>';
                                        } else if (post.pimage) {
                                            html += '<div class="imgvideo"><div class="img"><img class="image" src="data:image/png;base64,' + post.pimage + '"></div></div>'
                                        } else if (post.pvideo) {
                                            html += '<div class="imgvideo"><div class="img"><video class="video" src="http://169.254.202.137:8080/' + post.pvideo + '"controls></video></div></div>'
                                        }

                                        html += '<div class="info"><i class="like" :class="likeClass" @click.stop="Like()"></i><span class="infotext" id="infotext">{{ likes }}</span><i class="icon ice-message"></i><span class="infotext">{{ commentscount }}</span></div>'
                                        html += '</div>';

                                        let newPost = document.createElement('div');
                                        newPost.innerHTML = html;

                                        container.prepend(newPost);
                                        let vue = new Vue({
                                            el: '#post-' + post.pid,
                                            data: {
                                                islike: false,
                                                likes: 0,
                                                commentscount: 0,
                                            },
                                            computed: {
                                                likeClass() {
                                                    return this.islike ? 'icon ice-heart-on like-animation' : 'icon ice-heart-off';
                                                },
                                            },
                                            methods: {
                                                Like() {
                                                    let icon = this.$el.querySelector('.icon');
                                                    if (this.islike) {
                                                        // 取消点赞
                                                        this.likes--;
                                                        icon.classList.remove('ice-heart-on');
                                                        icon.classList.add('ice-heart-off');

                                                        // 发送取消点赞请求
                                                        $.ajax({
                                                            url: "http://169.254.202.137:8080/unlike",
                                                            type: "POST",
                                                            data: { pid: post.pid, uid: user.uid },
                                                            success: function (response) {

                                                            },
                                                            error: function (xhr, status, error) {
                                                                console.error(xhr.responseText);
                                                                // 在这里处理取消点赞错误响应
                                                            }
                                                        });
                                                    } else {
                                                        // 点赞
                                                        this.likes++;
                                                        icon.classList.remove('ice-heart-off');
                                                        icon.classList.add('ice-heart-on', 'like-animation');

                                                        // 发送点赞请求
                                                        $.ajax({
                                                            url: "http://169.254.202.137:8080/like",
                                                            type: "POST",
                                                            data: { pid: post.pid, uid: user.uid },
                                                            success: function (response) {

                                                            },
                                                            error: function (xhr, status, error) {
                                                                console.error(xhr.responseText);
                                                                // 在这里处理点赞错误响应
                                                            }
                                                        });
                                                    }
                                                    this.islike = !this.islike;
                                                },
                                                ViewPost() {
                                                    let url = 'ViewPost.html?pid=' + post.pid;
                                                    window.location.href = url;
                                                },
                                                handleClick(event) {
                                                    const target = event.target
                                                    if (target.classList.contains('like')) {
                                                        this.Lise()
                                                    } else {
                                                        this.ViewPost()
                                                    }
                                                }
                                            }
                                        });

                                        let uid = user && user.uid ? user.uid : '';

                                        $.ajax({
                                            type: 'get',
                                            url: 'http://169.254.202.137:8080/GetLikeAndComment?pid=' + pid + "&uid=" + uid,
                                            dataType: 'json',
                                            success: function (res) {
                                                vue.likes = res.data.likes;
                                                vue.commentscount = res.data.commentscount;
                                                vue.islike = res.data.islike;
                                            }
                                        });
                                    }
                                    $("#TreepubPost").click(function () {
                                        showpubPost();
                                    })
                                    function showpubPost() {

                                        // ...


                                        layer.open({
                                            area: ['42%', '35em'],
                                            resize: false,
                                            type: 1,
                                            title: '发布',
                                            content: $('#PostEdit').html(),
                                            success: function (layero, dIndex) {

                                            }
                                        });
                                    }
                                })
                            </script>
                            <div class="layui-body" style="width:598.4px;height:auto; margin-left: -200px;">
                                <div class="flow-demo" id="ID-flow-demo">

                                </div>
                            </div>

                        </div>
                    </div>
                    <link rel="stylesheet" href="css/Home.css">
                    <script>
                        $(document).ready(function () {

                            let vue = new Vue({
                                el: '#ID-flow-demo',
                                data: {
                                    allFollowers: '',
                                    user: null,
                                },
                                mounted() {
                                    this.GetUser();
                                    this.GetAllFollowers();
                                },
                                methods: {
                                    GetAllFollowers() {
                                        if (this.user) {
                                            $.ajax({
                                                url: 'http://169.254.202.137:8080/GetAllFollower?',
                                                data: 'Follower=' + this.user.uid,
                                                type: 'POST',
                                                dataType: 'json',
                                                success: (res) => {
                                                    this.allFollowers = res.data;
                                                    // 只有在成功获取到followers之后才连接WebSocket
                                                    this.ConnSK();
                                                }
                                            });
                                        } else {
                                            console.error("User information is not available.");
                                        }
                                    },
                                    GetUser() {
                                        if (sessionStorage.getItem("user") != null) {
                                            this.user = JSON.parse(sessionStorage.getItem("user"));
                                        }
                                    },
                                    ConnSK() {
                                        if (!this.allFollowers) {
                                            console.error("No followers to subscribe to.");
                                            return;
                                        }

                                        // 创建 WebSocket 连接
                                        let ws = new WebSocket('ws://169.254.202.137:8080/PostPush');

                                        // 处理连接打开事件
                                        ws.onopen = (event) => {

                                            // 发送订阅消息
                                            const sendSubscriptionMessage = () => {
                                                const subscriptionMessage = {
                                                    action: 'subscribe',
                                                    followers: vue.allFollowers, // 假设 vue.allFollowers 包含所有关注者的信息
                                                };

                                                ws.send(JSON.stringify(subscriptionMessage));
                                            };

                                            // 立即发送一次订阅消息
                                            sendSubscriptionMessage();

                                            // 每分钟发送一次订阅消息
                                            setInterval(sendSubscriptionMessage, 60000); // 60000 毫秒 = 1 分钟

                                        };

                                        // 处理来自服务器的传入消息
                                        ws.onmessage = (event) => {
                                            let message = JSON.parse(event.data);
                                            console.log(message);

                                            // 处理接收到的消息（例如，更新UI）
                                            // ...
                                            if (message.count != 0) {
                                                $("#rencent").removeClass("hidden")
                                                $("#rencent").text(message.count)
                                            }

                                        };

                                        // 处理连接关闭事件
                                        ws.onclose = (event) => {
                                            if (!event.wasClean) {
                                                // 可以在这里实现重连逻辑
                                                this.reconnectWebSocket(ws);
                                            }
                                        };

                                        // 处理错误
                                        ws.onerror = (error) => {
                                            console.error('WebSocket error:', error);
                                        };

                                        this.ws = ws;  // 将 WebSocket 实例存储在 Vue 实例中
                                    },
                                    reconnectWebSocket(ws) {
                                        setTimeout(() => {
                                            let newWs = new WebSocket('ws://169.254.202.137:8080/PostPush');
                                            // 重新设置事件处理函数
                                            newWs.onopen = ws.onopen;
                                            newWs.onmessage = ws.onmessage;
                                            newWs.onerror = ws.onerror;
                                            newWs.onclose = ws.onclose;
                                            this.ws = newWs;  // 更新 WebSocket 实例
                                        }, 1000); // 1秒后尝试重连
                                    }
                                }
                            });
                        })
                    </script>
                    <script src="js/HomeJs/Home.js"></script>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1" style="width:502px;margin-left:91px;">
                <div class="right" style="display:inline-block;width:508.5px;">
                    <a href="#"><i class="icon ice-search"
                            style="position:fixed;top:25px;left:1310px;z-index:10000;"></i></a>
                    <input type="text" name="" placeholder="搜索" class="layui-input"
                        style="width:360px;height:50px;margin-left:30px;border-radius:25px;position:fixed;top:10px;left:960px;">

                    <div class="right-center"
                        style="width:353px;height:150px;background-color:#f7f9f9;margin-left:18px;margin-top:70px;border-radius: 10px;">
                        <span><b
                                style="padding-left:10px;padding-top:8px;font-size:21px;display:inline-block;">订阅Premium</b><br>
                            <p style="padding-left:10px;padding-top:10px;">订阅可以解锁新功能，如果符合条件，还可以获得广告收入成分</p><br>
                            <a href="#"><button type="button" class="layui-btn layui-btn-primary layui-btn-radius"
                                    style="background-color:black;color:white;margin-left:10px;">
                                    <b>订阅</b></button></a>
                        </span>
                    </div>
                    <div class="right-bottom"
                        style="width:350px;height:510px;margin-top:13px;margin-left:18px;border-radius:10px;background-color:#f7f9f9">
                        <p style="font-size:21px;padding-top:10px;padding-left:10px;"><b>有什么新鲜事？</b></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>